<template>
  <div class="wrapper">
    <div class="header">
      <span>联系客服</span>
    </div>
    <div class="login_content">
      <h2>
        <img src="@/assets/login-icon.png" alt="" />
        <span>欢迎登录苏宁易购</span>
      </h2>

      <!-- 表单 -->
      <div class="laber">
        <van-form @submit="onSubmit">
          <van-field
            v-model="user.username"
            name="username"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="user.pwd"
            type="password"
            name="pwd"
            placeholder="请输入密码密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" color="#FC0" native-type="submit"
              >登录</van-button
            >
          </div>
        </van-form>
             <van-button round block color="#2196f3" @click="$router.push('/register')">没有账号？ 去注册一个不？</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { fectchLogin } from '_api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      user: {
        username: '',
        pwd: ''
      }
    }
  },
  methods: {
    onSubmit () {
      fectchLogin({
        deviceId: '5',
        deviceName: '57',
        ...this.user
      }).then(res => {
        if (res.data.code === 0) {
          Toast({
            message: '登录成功',
            duration: 1000,
            onClose: () => {
              localStorage.setItem('token', res.data.data.token)
                  this.$store.dispatch('cart/getInfo', this.loginForm)
              if (this.$route.query.from) {
            
                this.$router.replace(this.$route.query.from)
              } else {
                this.$router.replace('/home')
              }
            }
          })
        } else {
          Toast({
            type: 'fail',
            message: res.data.msg
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  background-color: #fff;
  height: 100vh;
}

.header {
  height: 0.973333rem;
  padding: 0.173333rem 0.32rem 0;
  text-align: right;
  font-size: 0.32rem;
}
.login_content {
  padding: 0 1rem;
  margin-top: 0.746667rem;
  h2 {
    font-size: 0.48rem;
    img {
      vertical-align: middle;
      display: inline-block;
      width: 1.28rem;
      height: 1.28rem;
      margin-right: 0.4rem;
    }
  }
}
.laber{
  margin-top: .8rem;
}
.van-button{
  color: #222;
  font-size: .453333rem;
  margin-top: .8rem;
  font-weight:600;
}
</style>
